<template>
    <!-- <ul class="menu">
        <li><img src="../../assets/login/home_logo.png" alt="" style="width: 28px;height: 34px;"></li>
        <li v-for="(item, index) in left_list" :key="index"> <i :class="item.icon"></i></li>
    </ul> -->

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="menu_flag"
        style="height: 100%;background-color: #304eec;color: #fff; overflow: scroll;" router>
        <div>
            <img src="../../assets/login/home_logo.png" alt=""
                style="width: 30px;height: 34px;margin: 10px 0 10px 20px;">
        </div>


        <template v-for="(item) in left_list">
            <el-menu-item :index="item.path" @click="tohome(item.name)" v-if="!item.children" :key="item.id">
                <i :class="item.icon" style="color: #fff;"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>

            <el-submenu :index="item.id" v-else :key="item.id">
                <template slot="title">
                    <i :class="item.icon" style="color: #fff;"></i>
                    <span slot="title" style="color: #fff;">{{ item.name }}</span>
                </template>
                <el-menu-item :index="items.path" v-for="(items) in item.children" :key="items.id"
                    @click="torouter(items.name)">
                    <span slot="title">{{ items.name }}</span>
                </el-menu-item>

            </el-submenu>
        </template>



        <!-- <el-submenu :index="items.id" v-for="(items, indexs) in item.children" :key="indexs">
                <template slot="title">{{ items.name }}</template>
                <el-menu-item :index="itemss.id" v-for="(itemss, indexss) in items.two_children" :key="indexss"
                    @click="torouter(itemss.name)">
                    {{ itemss.name }}
                </el-menu-item>
            </el-submenu> -->


    </el-menu>




</template>

<script>
export default {
    props: ['menu_flag', 'meunWidth'],
    data() {
        return {
            isCollapse: true,
            left_list: [

                {
                    icon: "el-icon-house",
                    name: "首页",
                    id: "1",
                    path: "/home"
                },
                {
                    icon: "el-icon-document-remove",
                    name: "财务部",
                    id: "2",
                    children: [{
                        name: "利润表",
                        id: "211",
                        path: "/profitTable"
                    }, {
                        name: "资产负债表",
                        id: "212",
                        path: "/balanceTable"
                    }, {
                        name: "现金流量表",
                        id: "213",
                        path: "/cashTable"
                    }, {
                        name: "应收款",
                        id: "214",
                        path: "/accountReceivable"
                    }, {
                        name: "库存",
                        id: "215",
                        path: "/inventory"

                    }, {
                        name: "临时报表",
                        id: "216",
                        path: "/forTable"
                    }]

                    // {
                    //     name: "分析模块",
                    //     id: "22",
                    //     two_children: [{
                    //         name: "盈利主要分析",
                    //         id: "221"
                    //     }, {
                    //         name: "成本分析",
                    //         id: "222"
                    //     }, {
                    //         name: "收入分析",
                    //         id: "223"
                    //     }]

                    // },
                    // {
                    //     name: "填表",
                    //     id: "23"
                    // }
                    // 
                },
                {
                    icon: "el-icon-printer",
                    id: "30",
                    name: "分析",
                    path: "/profit"
                },
                {
                    icon: "el-icon-printer",
                    id: "3",
                    name: "研发部"
                },

                {
                    icon: "el-icon-mobile",
                    id: "4",
                    name: "生产部"
                },
                {
                    icon: "el-icon-files",
                    id: "5",
                    name: "采购部"
                },
                {
                    icon: "el-icon-shopping-cart-full",
                    id: "6",
                    name: "仓库部"
                },
                {
                    icon: "el-icon-connection",
                    id: "7",
                    name: "销售部"
                },
                {
                    icon: "el-icon-user",
                    id: "8",
                    name: "人事部"
                },
            ],
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        tohome(name) {
            console.log(name)
            // if (name == '首页') {
            //     this.$router.push('/home')
            // }
            // if (name == '分析') {
            //     this.$router.push('/profit')
            // }

        },

        torouter(name) {
            console.log(name)
            // if (name == '利润表') {
            //     this.$router.push('/profitTable')
            // }
            // if (name == '资产负债表') {
            //     this.$router.push('/balanceTable')
            // }
            // if (name == '现金流量表') {
            //     this.$router.push('/cashTable')
            // }
            // if (name == '应收款') {
            //     this.$router.push('/accountReceivable')
            // }
            // if (name == '库存') {
            //     this.$router.push('/inventory')
            // }


        }
    },
};
</script>

<style lang="scss" >
.menu {
    // width: 70px;
    height: 100%;

    li {
        font-size: 25px;
        width: 70px;
        text-align: center;
        color: #fff;
        padding: 8px 0;
        cursor: pointer;
    }
}




/* 改变elementui 侧边栏移入颜色 */
.el-menu-item:hover {
    background: #1c88cf !important;
    color: #fff !important;
}

.el-submenu__title:hover {
    background: #1c88cf !important;
    color: #fff !important;
}

.el-menu-item.is-active {
    background: #1c88cf !important;
    color: #fff !important;
}

.el-submenu__title.is-active {
    background: #1c88cf !important;
    color: #fff !important;
}

.el-menu--inline {
    background-color: #304eec;
}
</style>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.el-submenu__title {
    color: #fff;
}

.el-menu {
    background-color: #304eec;
}

.el-menu-item {
    color: #fff;
    background-color: #304eec;
}

.el-submenu__title {
    background-color: #304eec;
}


.el-submenu__title i {
    color: #fff !important;
}
</style>